<template>
    <a-modal
            v-model="visible"
            :width="600"
            :title="isEdit ? '编辑伪装策略' : '添加伪装策略'"
            :maskClosable="false"
            @ok="confirm"
            @cancel="cancel"
            okText="确定"
            cancelText="取消"
    >
        <a-form :form="form" @keydown.native.enter.prevent='confirm' class="modelSearch">
            <a-form-item v-bind="formStyle" label="策略名称" required>
                <a-input class="formWidth"
                         placeholder="请输入策略名称" :disabled="isEdit"
                        ref="refocus"
                        v-decorator="[
                        'strategyName',
                        {   rules: [{ required: true, message: '请输入汉字、字母、数字、_或-字符' },{validator:this.verify.validateName.bind(this)}],
                            getValueFromEvent: (event) => {
                                return this.verify.formalSpace(event)
                            }
                         }
                    ]"
                />
            </a-form-item>
            <a-form-item v-bind="formStyle" label="原地址" required>
                <a-input type="text"   class="formWidth" v-decorator="[
                                        'ip',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入原地址"/>
            </a-form-item>
            <a-form-item v-bind="formStyle" label="伪装地址" required style="position: relative">
                <a-select placeholder="请选择伪装地址" class="formWidth"
                          v-decorator="['adapterName', { rules: [{ required: true, message: '请选择伪装地址'}]}]">
                    <a-select-option v-for="item in netWorkList" :value="item.internetAdapterName" :key="item.internetAdapterName">{{item.internetAdapterName }}</a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
    import verify from 'libs/verify'
    import { mapState } from 'vuex'

    export default {
        name: 'add_edit_strategy',
        data () {
            return {
                form: this.$form.createForm(this),
                isEdit: false,
                visible: false,
                verify,
                id: 0,
                oldObj:{},
            }
        },
        computed: {
            ...mapState({
                formStyle: state => state.common.formStyle,  //表单label，input宽度
                netWorkList: state => state.common.netWorkList,  //表单label，input宽度
            })
        },
        methods: {
            /**
             * Function    : showAddModal
             * Description : 新增单位时显示弹框
             * Input       : none
             * Return      : none
             */
            showAddModal () {
                this.visible = true;
                this.isEdit = false;
                let _this = this;
                setTimeout(function () {
                    _this.$refs['refocus'].focus()
                }, 200)
            },
            /**
             * Function    : showEdit
             * Description : 编辑时单位显示
             * Input       : opt单个单位所有数据
             * Return      : none
             */
            showEdit (opt) {
                this.isEdit = true;
                this.visible = true;
                this.id = opt.id;
                this.oldObj  = opt
                this.$nextTick(() => {
                    this.form.setFieldsValue(
                      this.$pick(opt, [
                          'strategyName',
                          'ip',
                          'adapterName',
                      ])
                    )
                })
            },
            /**
             * Function    : confirm
             * Description : 表单提交
             * Input       : data
             * Return      : none
             */
            confirm (e) {
                e.preventDefault();
                this.form.validateFields((err, value) => {
                    if (!err) {
                        let _this = this
                        let url = '/nat/addNatConfig'
                        let prams = {}
                        if (this.isEdit) {
                            value.id = this.id
                            url = '/nat/modifyNatConfig'
                            prams.id =this.id
                            prams.newStrategyName = value.strategyName
                            prams.newIp = value.ip
                            prams.newAdapterName = value.adapterName
                            /*prams.oldNatIp = this.oldObj.natIp
                            prams.newNatIp = value.natIp*/
                        }else{
                            prams = value
                        }
                        _this.$parent.spinning = true
                        _this.$post(url,prams).then(res => {
                            _this.$parent.spinning = false
                            if (res.code === 0) {
                                _this.$emit('init')
                                _this.cancel()
                                _this.$message.success(res.message);
                            } else {
                                _this.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            /**
             * Function    : cancel
             * Description : 取消表单显示
             * Input       : data
             * Return      : none
             */
            cancel () {
                this.visible = false;
                let _this = this;
                setTimeout(function () {
                    _this.form.resetFields()
                }, 100)
            }
        }
    }
</script>

